<template>
    <div class="record">
        <div class="global-button record-button">
            <el-button @click="resetDifficultyFilter">清除难度过滤器</el-button>
            <el-button @click="resetTagFilter">清除标签过滤器</el-button>
            <el-button @click="clearFilter">清除所有过滤器</el-button>
        </div>
        <el-table ref="filterTable" stripe :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
            style="width: 100%">
            <el-table-column prop="tableId" v-if="false">
            </el-table-column>
            <el-table-column prop="record" label="题目" width="550">
                <template slot-scope="scope">
                    <el-link @click="dialogVisible = true; everyDialog((scope.row.tableId))">{{ scope.row.record
                    }}</el-link>
                </template>
            </el-table-column>


            <el-table-column prop="difficulty" label="难度" sortable :sort-method="sortMethod" style="width: 10%"
                column-key="difficulty"
                :filters="[{ text: '简单', value: '简单' }, { text: '中等', value: '中等' }, { text: '困难', value: '困难' }]"
                :filter-method="filterDifficulty">
            </el-table-column>

            <el-table-column prop="tag" label="标签" sortable style="width: 20%" column-key="tag" :filters="[{ text: '数组', value: '数组' },
            { text: '栈', value: '栈' },
            { text: '堆', value: '堆' },
            { text: '树', value: '树' },
            { text: '二叉树', value: '二叉树' },
            { text: '队列', value: '队列' },
            { text: '链表', value: '链表' },]" :filter-method="filterTag" filter-placement="bottom-end">
                <template slot-scope="scope">
                    <!-- <el-tag type="primary" disable-transitions>{{ scope.row.tag }}</el-tag> -->
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currpage" :page-sizes="[20, 50, 100]" :page-size="pagesize"
                layout="sizes, prev, pager, next" :total="tableData.length">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%">
            <span class="dialog-banner"><el-link class="elLinkBigger" @click="linkRecord">{{ dialogBanner
            }}</el-link></span>
            <div class="dialog-tag">
                <ul>
                    <li v-for="tag in tags" :key="tag">{{ tag }}</li>
                </ul>
            </div>
            <div class="dialog-info">{{ dialogInfo }}</div>
            <!-- 收藏button -->
            <el-button class="dialog-collection" :icon="Collection" circle @click="toggleCollection"></el-button>
            <el-button class="dialog-record" :icon="Record" circle @click="toggleRecord"></el-button>

            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getPrbInfoFromId } from '@/api/common'
import { getRecordId } from '@/api/record'
import { createCollection } from '@/api/collection'
import { deleteCollection } from '@/api/collection'
import { isCollection } from '../../utils/useful';
import { isRecord } from '../../utils/useful';
import { createRecord } from '@/api/record'
import { doneRecord } from '@/api/record'
import { getTime } from '../../utils/useful'




export default {
    data() {
        return {
            tableData: [],
            pagesize: 20,
            currpage: 1,
            problemIDArray: [],
            problemInfoArray: [],
            dialogVisible: false,
            dialogBanner: '',
            tags: [],
            dialogInfo: '',
            Collection: "",
            externalUrl: '',
            problemUid: null,
            Record: "",
        }
    },
    mounted() {
        getRecordId()
            .then((res) => {
                this.problemIDArray = Object.values(res.data);
                console.log(this.problemIDArray)
                const promises = [];

                for (let i = 0; i < this.problemIDArray.length; i++) {
                    const promise = getPrbInfoFromId(this.problemIDArray[i].problemUid);
                    console.log(this.problemIDArray[i].problemUid)
                    console.log(promise)
                    promises.push(promise);
                }
                console.log(promises)
                return Promise.all(promises);
            })
            .then((results) => {
                for (let i = 0; i < results.length; i++) {
                    const res = results[i];
                    const problemInfo = res.data;
                    let d = '';
                    
                    if (problemInfo.difficulty === 'Medium' || problemInfo.difficulty === 'regular') {
                        d = '中等';
                    } else if (problemInfo.difficulty === 'Easy' || problemInfo.difficulty === 'very easy' || problemInfo.difficulty === 'little easy') {
                        d = '简单';
                    } else if (problemInfo.difficulty === 'Hard' || problemInfo.difficulty === 'very hard' || problemInfo.difficulty === 'little hards') {
                        d = '困难';
                    }

                    const tableEle = {
                        tableId: i,
                        difficulty: d,
                        record: problemInfo.source + ': ' + problemInfo.title,
                        tag: null
                    };

                    this.tableData.push(tableEle);
                    this.problemInfoArray.push(problemInfo);
                }
            })
            .catch((error) => {
                console.error(error);
            });
    },

    methods: {
        resetDifficultyFilter() {
            this.$refs.filterTable.clearFilter('difficulty');
        },
        resetTagFilter() {
            this.$refs.filterTable.clearFilter('tag');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterDifficulty(value, row) {
            return row.difficulty === value;
        },
        sortMethod(a, b) {
            const difficultyOrder = {
                '简单': 0,
                '中等': 1,
                '困难': 2,
            };
            const difficultyA = difficultyOrder[a.difficulty];
            const difficultyB = difficultyOrder[b.difficulty];
            return difficultyA - difficultyB;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currpage = val;
        },
        toggleCollection() {
            if (this.Collection === "el-icon-star-off") {
                this.Collection = "el-icon-star-on"
                createCollection(null, this.problemUid, "").then((res) => {
                    // console.log(res.data)
                });
            }
            else {
                this.Collection = "el-icon-star-off"
                deleteCollection(this.problemUid).then((res) => {
                    // console.log(res.data)
                })
            }
        },
        toggleRecord() {
            if (this.Record === "el-icon-goods") {
                this.Record = 'el-icon-s-goods'
                doneRecord(this.problemUid, 0, getTime(), "done").then((res) => {
                    // console.log(res.data)
                });
            }
            else { }
        },
        everyDialog(tableId) {
            this.tags.length = 0
            this.dialogBanner = this.tableData[tableId].record
            this.dialogInfo = this.problemInfoArray[tableId].description
            this.externalUrl = this.problemInfoArray[tableId].url
            this.problemUid = this.problemIDArray[tableId].problemUid
            this.tags.push(this.tableData[tableId].difficulty)
            //标签
            if(this.tags[0] === '') {
                this.tags.length = 0
            }

            let c = isCollection(this.problemUid)

            c.then((value) => {
                if (value === true) {
                    this.Collection = "el-icon-star-on"
                }
                else {
                    this.Collection = "el-icon-star-off"
                }
            })

            // console.log(this.problemUid)
            let temp = this.problemUid
            // console.log(temp)
            let t = isRecord(temp)
            // console.log(t)

            t.then((value) => {
                if (value === 2) {
                    this.Record = 'el-icon-s-goods';
                } else if (value === 3) {
                    this.Record = 'el-icon-goods';
                } else {
                    console.log("error: isRecord");
                }
            });
        },
        linkRecord() {
            createRecord(this.problemUid).then((res) => {
                window.location.href = this.externalUrl;
            })
        }
    }
}
</script>

<style lang="scss">
.record {
    width: 1200px;
    background-color: #FFF7EF;
    margin: 0 auto;

    .record-button {
        margin-top: -20px;
    }
}
</style>
